<script setup lang="ts">
import {useListStore} from "@/stores/list";
import {Delete, Edit, Picture, Plus, Refresh} from "@element-plus/icons-vue";
import {storeToRefs} from "pinia";
import {toast} from "@/utils/useLayer";
import {useFullscreen} from "@vueuse/core";

const {
  getUserInfo,
  echoEditData,
  handleDelete,
  handleStateManagement,
  handlePageChange,
  onReset,
  onSearch,
} = useListStore();

const listStore = useListStore()

const {
  isLoading,
  userAvatarSrcList,
  preAvatarSrcList,
  currentPage,
  pageSize,
  currentTableData,
  totalCount,
  dialogVisible,
  searchFormModel,
} = storeToRefs(listStore)

onMounted(() => getUserInfo())

const handleClose = () => {
  // TODO:关闭预览图的遮罩层, 现在只能通过esc关闭, hide-on-click-modal和关闭按钮均失效

  // const imageMask = document.querySelector('.el-image-viewer__wrapper')
  // if (!imageMask) return
  // imageMask.style.display = 'none'
  toast('正在修复, 可通过按下ESC键关闭。', 'info')
  console.log('close')
}
// 边框斑马纹切换按钮
const isStripe = ref(false)
const hasBorder = ref(false)
const loading = ref(false)
const handleChange = () => {
  loading.value = true

  hasBorder.value = !hasBorder.value
  const timer = setTimeout(() => {

    if (timer) clearTimeout(timer)

    loading.value = false
  }, 300)
}
//刷新表格
const handleRefresh = () => getUserInfo()
// 全屏
const isFullScreen = useFullscreen();
const tableMaxHeight = computed(() => isFullScreen.isFullscreen.value ? '490' : '368')


// const handleCommand = (e) => {
//   switch (e) {
//     case "enable":
//       handleEnableEvent()
//       break
//     case "disable":
//       handleDisableEvent()
//       break
//   }
// }

// const items = [
//
//   {id: 1, value: 20},
//
//   {id: 2, value: 35},
//
//   {id: 3, value: 15},
//
//   {id: 4, value: 40}];
//
// const maxItem = items.reduce((prev, current) => (prev.id > current.id) ? prev.id : current.id);
//
// console.log(maxItem)
</script>

<template>
  <div>
    <el-card shadow="never">
      <SearchForm :model="searchFormModel" @on-search="onSearch" @on-reset="onReset" ml-1>
        <SearchItem label="用户名" prop="keyword">
          <el-input v-model="searchFormModel.keyword" placeholder="请输入用户名" clearable/>
        </SearchItem>

        <template #showAdvancedSearch>
          <SearchItem label="手机号" prop="phone">
            <el-input v-model="searchFormModel.phone" placeholder="请输入手机号" clearable/>
          </SearchItem>
        </template>
      </SearchForm>

      <!--新增-->
      <div flex items-center justify-between mt-2>
        <div>
          <el-button type="primary" :icon="Plus" @click="dialogVisible = true">新增</el-button>
          <AddUserDialog/>
        </div>
        <!--刷新数据-->
        <div flex items-center mr-5>
          <div>
            <el-button type="primary" plain @click="handleRefresh">刷新数据</el-button>
          </div>
          <div mx-3>
            <el-tooltip content="边框+斑马纹" placement="top">
              <el-switch v-model="isStripe" @change="handleChange" :loading="loading"/>
            </el-tooltip>
          </div>
          <div>
            <el-tooltip content="刷新" placement="top">
              <el-icon size="20" cursor-pointer @click="handleRefresh">
                <Refresh/>
              </el-icon>
            </el-tooltip>
          </div>
        </div>
      </div>

      <el-table :data="currentTableData" v-loading="isLoading" :stripe="isStripe" mt-5 :max-height="tableMaxHeight"
                transition-max-height transition-duration-1000 :border="hasBorder">
        <el-table-column prop="id" label="id" align="center" width="90"/>
        <el-table-column prop="name" label="用户名" width="100" align="center"/>
        <el-table-column prop="avatar" label="头像" align="center" width="120">
          <template #default="scope">
            <!--<el-avatar :src="scope.row.avatar" shape="square" size="large"/>-->
            <el-image :src="scope.row.avatar" preview-teleported :preview-src-list="userAvatarSrcList"
                      fit="cover" :initial-index="scope.row.id - 1" rounded>

              <template #placeholder>
                <div class="image-slot">
                  <span class="dot">...</span>
                </div>
              </template>

              <template #viewer>
                <el-image-viewer :url-list="preAvatarSrcList" :initial-index="scope.row.id - 1"
                                 :zoom-rate="1.2" :max-scale="3" :min-scale=".5" @close="handleClose"
                                 :hide-on-click-modal="true"/>
              </template>

              <template #error>
                <div class="image-slot" text-xl>
                  <el-icon>
                    <Picture/>
                  </el-icon>
                </div>
              </template>

            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="地址" align="center" width="150"/>
        <el-table-column prop="status" label="状态" align="center" width="120">
          <template #default="scope">
            <el-tag :type="scope.row.status ? 'success' : 'danger'">
              {{ scope.row.status ? '启用' : '禁用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="update_time" label="更新时间" align="center" width="150"/>
        <el-table-column prop="create_time" label="创建时间" align="center" width="200"/>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button :icon="Edit" type="primary" @click="echoEditData(scope.row)"
                       :disabled="!scope.row.status"></el-button>
            <el-button :icon="Delete" type="danger" @click="handleDelete(scope.row.id)"></el-button>

            <el-dropdown split-button ml-3 :hide-on-click="false" trigger="click">
              更多
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="handleStateManagement('enabled',scope.row.id)" :disabled="scope.row.status">
                    启用
                  </el-dropdown-item>
                  <el-dropdown-item :disabled="!scope.row.status">
                    <el-popconfirm title="确认禁用该用户?" @confirm="handleStateManagement('disabled',scope.row.id)"
                                   :hide-after="75">
                      <template #reference>
                        禁用
                      </template>
                      <template #actions="{confirm,cancel}">
                        <el-button plain size="small" @click="cancel">取消</el-button>
                        <el-button type="danger" size="small" @click="confirm">
                          确认
                        </el-button>
                      </template>
                    </el-popconfirm>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination background layout="prev, pager, next" :total="totalCount" :current-page="currentPage"
                     :page-size="pageSize" @update:currentPage="handlePageChange" :hide-on-single-page="false"
                     mt-5 flex justify-center/>
    </el-card>

    <EditUserDialog/>
  </div>

</template>

<style scoped>
.image-slot {
  @apply flex justify-center items-center w-full h-full bg-coolgray text-light;
}

.dot {
  animation: dot 2s infinite steps(3, start);
  overflow: hidden;
}

@keyframes dot {
  33.33% {
    content: ".";
  }
  66.67% {
    content: "..";
  }
  100% {
    content: "...";
  }
}

</style>